<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
#dialog{
    background:white;
    z-index: 2001;
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-150px;
    margin-left:-200px;
    width:400px;
    height:300px;
    border:solid 1px black;
}
#dialog .title{
    height:30px;
    padding:5px;
    background:#ccc;
    font-size:18px;
}
#dialog .content{
    padding:10px;
    height:200px;
}
#dialog .buttonGroup{
    height:30px;
    padding:5px;
    text-align:right;
}
#mask {
    display: none;
    z-index:1000;
    position: fixed;
    left:0px;
    top:0px;
    width:100vw;
    height:100vh;
    background: rgba(0, 0, 0, 0.3);
}
</style>
<body>

<h1>对话框效果</h1>

<button id="showDialog">打开弹窗</button>

<div id="mask"></div>
<div id="dialog">
    <div class="title">
        弹窗标题
    </div>
    <div class="content">
        这是一个虚拟弹窗
    </div>
    <div class="buttonGroup">
        <button id="closeDialog">关闭</button>
    </div>
</div>


<script>
    function g(v){
        return document.getElementById(v)
    }
    g('showDialog').onclick = function(){
        g('mask').style.display = 'block';
        g('dialog').style.display = 'block';
    }
    g('closeDialog').onclick = function(){
        g('mask').style.display = 'none';
        g('dialog').style.display = 'none';
    }
</script>
</body>
</html>

